import React, { Component } from 'react'
import { 
    Form, Input, Radio, Tab, Button, 
    DatePicker, Select, NumberPicker,
    Loading, Message,
 } from '@alifd/next';
import {
    requestAddProject
} from './reducer/CreateProjectAction';

import './CreateProject.scss';


const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 14
    }
};

// itemApplyCode: values.itemApplyCode,
// trustContractCode: values.trustContractCode,
// itemApplyTitle: values.itemApplyTitle,
// customerName: values.customerName,
// itemApplyMoney: values.itemApplyMoney,
// financePayMoney: values.financePayMoney,
// remainder: values.remainder,
// loanType: values.loanType,
// financePayDate: values.financePayDate,
// financePayEndDate: values.financePayEndDate,
// itemApplyRate: values.itemApplyRate,
// itemApplyExpires: values.itemApplyExpires,
// createBy: values.createBy,
// itemApplyName: values.itemApplyName,
// itemApplyDate: values.itemApplyDate,
// isOverClear: values.isOverClear,
// customerId: values.customerId,


export default class CreateProject extends Component {
    constructor(props){
        super(props);
        this.state = {
            isSubmit: false,
        }
    }

    userExists = (rule, value) => {
        return new Promise((resolve, reject) => {
            if (!value) {
                resolve();
            } else {
                setTimeout(() => {
                    if (value === 'frank') {
                        reject([new Error('Sorry, this username is already exist.')]);
                    } else {
                        resolve();
                    }
                }, 500);
            }
        });
    }

    onSubmit = async (values) => {
        this.setState({
            isSubmit: true,
        })
        values.financePayDate ? values.financePayDate.format("YYYY-MM-DD") : values.financePayDate;
        values.financePayEndDate ? values.financePayEndDate.format("YYYY-MM-DD") : values.financePayEndDate;
        values.customerId = new Date().getTime();
        console.log(values)
        let model;
        try {
            model = await requestAddProject(values);
            console.log('model===',model);
            if (model) {
                this.setState({isSubmit: false})
                Message.show({
                    type: 'success',
                    title: '保存成功',
                    duration: 2000
                })
                this.props.history.goBack();
            }
        } catch (error) {
            console.log(error)
        }
    }

    render() {

        return (
            <div className="layout-content-box">
                <Loading 
                    tip={'正在提交...'}
                    visible={this.state.isSubmit}
                />
                <Tab>
                    <Tab.Item title={'新增项目'} key={'0'}>
                        <Form {...formItemLayout} className="form-project-box" labelAlign="top">
                            <FormItem
                                label="项目编号:"
                                hasFeedback
                                required
                                requiredMessage="项目编号 是必填字段"
                                validator={this.userExists}
                            >
                                <Input name="itemApplyCode" />
                            </FormItem>
                            <FormItem
                                label="贷款合同编号:"
                                hasFeedback
                                required
                                requiredMessage="贷款合同编号 是必填字段"
                            >
                                <Input name="trustContractCode" />
                            </FormItem>
                            <FormItem
                                label="项目标题:"
                                hasFeedback
                                required
                                requiredMessage="项目标题 是必填字段"
                            >
                                <Input name="itemApplyTitle" />
                            </FormItem>
                            <FormItem
                                label="客户名称:"
                                hasFeedback
                                required
                                requiredMessage="客户名称 是必填字段"
                            >
                                <Input name="customerName" />
                            </FormItem>
                            <FormItem
                                label="贷款金额(元):"
                                hasFeedback
                                required
                                requiredMessage="贷款金额(元) 是必填字段"
                            >
                                <Input name="itemApplyMoney" />
                            </FormItem>
                            <FormItem
                                label="放款金额(元):"
                                hasFeedback
                            >
                                <Input name="financePayMoney" />
                            </FormItem>
                            <FormItem
                                label="贷款余额(元):"
                                hasFeedback
                            >
                                <Input name="remainder" />
                            </FormItem>
                            <FormItem
                                label="借款类型:"
                            >
                                <Select name="loanType" placeholder="请选择借款类型">
                                    <option value="0">等额本息</option>
                                    <option value="1">到期还本</option>
                                </Select>
                            </FormItem>
                            <FormItem
                                label="放款日期:"
                            >
                                <DatePicker name="financePayDate"/>
                            </FormItem>
                            <FormItem
                                label="到期日期:"
                            >
                                <DatePicker name="financePayEndDate"/>
                            </FormItem>
                            <FormItem
                                label="贷款利率:"
                                required
                                requiredMessage="贷款利率 是必填字段"
                            >
                                <Input name="itemApplyRate" />
                            </FormItem>
                            <FormItem
                                label="贷款期限:"
                                required
                                requiredMessage="贷款期限 是必填字段"
                            >
                                <NumberPicker name="itemApplyExpires" defaultValue={1}/>
                            </FormItem>
                            <FormItem
                                label="信贷经理:"
                            >
                                <Input name="createBy" />
                            </FormItem>
                            <FormItem
                                label="项目名称:"
                            >
                                <Input name="itemApplyName" />
                            </FormItem>
                            <FormItem
                                label="接单日期:"
                            >
                                <Input name="itemApplyDate" />
                            </FormItem>
                            <FormItem
                                label="是否结清:"
                            >
                                <RadioGroup name="isOverClear" >
                                    <Radio value="yes">是</Radio>
                                    <Radio value="no">否</Radio>
                                </RadioGroup>
                            </FormItem>

                            <FormItem wrapperCol={{ offset: 6 }} >
                                <Form.Submit validate type="primary" onClick={this.onSubmit} style={{marginRight: 10}}>确定</Form.Submit>
                                <Button type="normal" onClick={() => {this.props.history.goBack()}}>取消</Button>
                            </FormItem>
                        </Form>
                    </Tab.Item>
                </Tab>
            </div>
        )
    }
}